<template>
  <div class="index">
    <van-search
      v-model="value"
      shape="round"
      background="#f3bcaf"
      placeholder="寻找感兴趣在商品"
      @click="search"
    />
    <span class="iconfont icon-wode"></span>
    <!-- nav -->
    <van-tabs v-model="active"  sticky background="#f3bcaf" line-width="0" title-inactive-color="#fff" title-active-color="#000000b3">
      <van-tab title="推荐"  title-class="{actives:bool}">
      </van-tab>
      <van-tab title="ZTE中兴" >
        <zte/>
      </van-tab>
      <van-tab title="nubia"></van-tab>
      <van-tab title="红魔"></van-tab>
      <van-tab title="智慧生活"></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Search, Tab, Tabs} from "vant";
import Recommend from './Recommend';
import ZTE from './ZTE.vue';

Vue.use(Search);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  components:{Recommend,ZTE },
  data() {
    return {
       value: "",
      active: "0",
      bool:true
    };
     
  },
  methods: {
    search() {
      this.$router.push("/search");
    },
   
  },
};
</script>

<style lang="scss" scoped>
.van-search {
  width: 323px;
}
.index {
    background:#f3bcaf;
  > span {
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 25px;
    color: #fff;
  }
}
.van-cell {
  color: #aaa;
}
.actives{
  font-size: 20px;
}
</style>
